<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">课程打卡</text>
			</view>
		</view>
		<view class="card-center">
			<view class="kechengming">
				<view class="kezi">
					课程
				</view>
				<view class="gangqinke">
					基础钢琴课
				</view>
			</view>
			<view class="shangke-time">
				<view class="topke-time">
					上课时间：8月21日 08:30
				</view>
				<view class="xiake-time">
					下课时间：8月21日 11:30
				</view>
			</view>
			<view class="topdaka">
				<image src="../../../../static/teacherimg/card_bg.png" mode=""></image>
				<view class="topcard">
					上课打卡
				</view>
			</view>
			
		</view>
		
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	.card-center{
		width: 690rpx;
		height: 730rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
		margin: auto;
		margin-top: 167rpx;
		overflow: hidden;
	}
	.kechengming{
		width: auto;
		height: 30px;
		margin: 39rpx 0rpx 0rpx 29rpx;
		display: flex;
	}
	.kezi{
		width: 58rpx;
		height: 30rpx;
		background: #8DCE2A;
		border-radius: 6rpx;
		text-align: center;
		line-height: 30rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	.gangqinke{
		width: auto;
		color: #333333;
		font-size: 28rpx;
		margin-left: 16rpx;
		line-height: 30rpx;
		font-weight: bold;
	}
	
	.shangke-time{
		width: auto;
		height: 24rpx;
		margin: 40rpx 0rpx 0rpx 31rpx;
		display: flex;
	}
	.topke-time,.xiake-time{
		width: auto;
		height: 100%;
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.xiake-time{
		margin-left: 27rpx;
	}
	
	.topdaka{
		width: 295rpx;
		height: 295rpx;
		position: relative;
		margin: auto;
		z-index: 1;
		top: 129rpx;
	}
	.topdaka>image{
		width: 295rpx;
		height: 295rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index:1;
	}
	.topcard{
		width: 125rpx;
		height: 32rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 999;
	}
</style>
